<template>
	<view class="container">
		<!-- 顶部用户信息 -->
		<view class="author-section">
			<image class="avatar" :src="guide.authorAvatar" mode="aspectFill"></image>
			<text class="author-name">{{guide.authorName}}</text>
			<view class="share-btn">
				<text class="iconfont">&#xe600;</text>
			</view>
		</view>
		
		<!-- 攻略内容 -->
		<view class="guide-content">
			<!-- 主图 -->
			<image class="main-image" :src="guide.mainImage" mode="aspectFill"></image>
			
			<!-- 攻略标题和基本信息 -->
			<view class="title-section">
				<text class="guide-title">{{guide.title}}</text>
				<view class="info-list">
					<view class="info-item">
						<text class="info-label">游览时间:</text>
						<text class="info-value">{{guide.visitDuration}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">开放时间:</text>
						<text class="info-value">{{guide.openTime}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">门票信息:</text>
						<text class="info-value">{{guide.ticketPrice}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">地址:</text>
						<text class="info-value">{{guide.address}}</text>
					</view>
				</view>
			</view>
			
			<!-- 攻略详情图片和描述 -->
			<view class="detail-section">
				<block v-for="(item, index) in guide.details" :key="index">
					<image v-if="item.image" class="detail-image" :src="item.image" mode="widthFix"></image>
					<text v-if="item.text" class="detail-text">{{item.text}}</text>
				</block>
			</view>
			
			<!-- 发布信息 -->
			<view class="post-info">
				<text class="post-id">浏览{{guide.viewCount}}</text>
				<text class="post-date">发布于: {{guide.publishDate}}</text>
			</view>
		</view>
		
		<!-- 评论区 -->
		<view class="comment-section">
			<view class="comment-header">
				<text class="comment-title">评论 ({{comments.length}})</text>
				<text class="comment-more">></text>
			</view>
			
			<view class="comment-list">
				<view class="comment-item" v-for="(comment, index) in comments" :key="index">
					<view class="comment-user">
						<image class="comment-avatar" :src="comment.avatar" mode="aspectFill"></image>
						<view class="comment-user-info">
							<view class="comment-username">
								<text>{{comment.username}}</text>
								<view v-if="comment.isVip" class="vip-tag">LV.{{comment.vipLevel}}</view>
							</view>
							<text class="comment-time">{{comment.time}}</text>
						</view>
						<view class="comment-like" @tap="likeComment(index)">
							<text class="iconfont" :class="{liked: comment.isLiked}">&#xe601;</text>
						</view>
					</view>
					<text class="comment-content">{{comment.content}}</text>
				</view>
			</view>
		</view>
		
		<!-- 底部标签和输入框 -->
		<view class="bottom-section">
			<view class="tags-section">
				<text class="tag-icon">&#xe602;</text>
				<text class="tag-text">景点 | 沙扒湾</text>
				<text class="tag-arrow">></text>
			</view>
			
			<view class="input-section">
				<input class="comment-input" placeholder="快来写下你的评论吧~" />
				<view class="like-btn">
					<text class="iconfont">&#xe601;</text>
					<text>点赞</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				guide: {
					id: 1,
					title: '沙扒湾旅游介绍',
					authorName: '爱寿司的花',
					authorAvatar: '/static/图片.jpg',
					mainImage: '/static/图片.jpg',
					visitDuration: '建议3-4小时',
					openTime: '8:30-17:30',
					ticketPrice: '门票￥90起',
					address: 'XXXXXXXX',
					viewCount: 4451,
					publishDate: '2024/10/28',
					details: [
						{
							image: '/static/图片.jpg',
							text: 'XXXXX: XXXX'
						},
						{
							image: '/static/图片.jpg',
							text: 'XXXXX: XXXXX'
						},
						{
							image: '/static/图片.jpg'
						}
					]
				},
				comments: [
					{
						username: '爱寿司的花',
						avatar: '/static/图片.jpg',
						content: '名副其实好吃',
						time: '3小时前',
						isVip: true,
						vipLevel: 7,
						isLiked: false
					},
					{
						username: 'FUSHANZUMIAO',
						avatar: '/static/图片.jpg',
						content: '不错',
						time: '3小时前',
						isVip: true,
						vipLevel: 7,
						isLiked: true
					},
					{
						username: '草莓',
						avatar: '/static/图片.jpg',
						content: '赞',
						time: '3小时前',
						isVip: true,
						vipLevel: 7,
						isLiked: false
					}
				]
			}
		},
		onLoad(options) {
			// 获取攻略ID
			if (options.id) {
				// 通过ID获取攻略详情
				this.getGuideDetail(options.id);
			}
		},
		methods: {
			getGuideDetail(id) {
				// 实际开发中，这里应该发送请求获取攻略详情
				console.log('获取攻略详情, ID:', id);
				// 这里仅做演示，使用的是硬编码数据
			},
			likeComment(index) {
				// 点赞评论
				this.comments[index].isLiked = !this.comments[index].isLiked;
			}
		}
	}
</script>

<style>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	/* 顶部用户信息样式 */
	.author-section {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
	}
	
	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	
	.author-name {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}
	
	.share-btn {
		font-size: 40rpx;
		color: #666;
	}
	
	/* 攻略内容样式 */
	.guide-content {
		background-color: #ffffff;
		margin-bottom: 20rpx;
	}
	
	.main-image {
		width: 100%;
		height: 400rpx;
	}
	
	.title-section {
		padding: 30rpx;
	}
	
	.guide-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.info-list {
		font-size: 28rpx;
		color: #666;
	}
	
	.info-item {
		margin-bottom: 10rpx;
	}
	
	.info-label {
		margin-right: 10rpx;
	}
	
	.detail-section {
		padding: 0 30rpx;
	}
	
	.detail-image {
		width: 100%;
		margin: 20rpx 0;
		border-radius: 10rpx;
	}
	
	.detail-text {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 30rpx;
		line-height: 1.6;
		display: block;
	}
	
	.post-info {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		font-size: 24rpx;
		color: #999;
		border-top: 1rpx solid #eee;
	}
	
	/* 评论区样式 */
	.comment-section {
		background-color: #ffffff;
		margin-bottom: 120rpx;
	}
	
	.comment-header {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.comment-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.comment-more {
		color: #999;
	}
	
	.comment-list {
		padding: 0 30rpx;
	}
	
	.comment-item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eee;
	}
	
	.comment-user {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.comment-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	
	.comment-user-info {
		flex: 1;
	}
	
	.comment-username {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333;
	}
	
	.vip-tag {
		background-color: #ff6b6b;
		color: #fff;
		font-size: 20rpx;
		padding: 2rpx 10rpx;
		border-radius: 20rpx;
		margin-left: 10rpx;
	}
	
	.comment-time {
		font-size: 24rpx;
		color: #999;
	}
	
	.comment-like {
		font-size: 40rpx;
		color: #999;
	}
	
	.liked {
		color: #ff6b6b;
	}
	
	.comment-content {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
	}
	
	/* 底部标签和输入框样式 */
	.bottom-section {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		border-top: 1rpx solid #eee;
	}
	
	.tags-section {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.tag-icon {
		font-size: 32rpx;
		color: #666;
		margin-right: 10rpx;
	}
	
	.tag-text {
		flex: 1;
		font-size: 28rpx;
		color: #666;
	}
	
	.tag-arrow {
		color: #999;
	}
	
	.input-section {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
	}
	
	.comment-input {
		flex: 1;
		height: 70rpx;
		background-color: #f5f5f5;
		border-radius: 35rpx;
		padding: 0 20rpx;
		font-size: 26rpx;
	}
	
	.like-btn {
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		font-size: 26rpx;
		color: #666;
	}
	
	.like-btn .iconfont {
		font-size: 40rpx;
		margin-right: 10rpx;
	}
</style> 